@@include('../partials/_template-top.html', {
'bodyClass': 'home-one-bg'
})

@@include('../partials/_header.html')
<div id="scrollSmoother-container">
    @@include('../partials/_breadcrumb.html', {
    'breadcrumbText': 'Shop Page',
    'breadcrumbTitle': 'SHOP PAGE',
    })

    <!-- ============================ Shop section Start ============================== -->
    <section class="shop-ip-area py-120 position-relative overflow-hidden z-1">
        <div class="container">
            <div class="row g-4 flex-wrap-reverse">
                <div class="col-xl-3 col-lg-4 col-12">
                    <div class="shop-sidebar">

                        <div class="shop-widget shop-widget-search">
                            <form action="#" class="shop-widget-search-form position-relative">
                                <input type="text" class="form-control" placeholder="Search Products...">
                                <button type="submit" class="shop-widget-search-btn">
                                    <i class="ph ph-magnifying-glass"></i>
                                </button>
                            </form>
                        </div>

                        <div class="shop-widget shop-widget-category" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="200">
                            <h4 class="shop-widget-title">Categories</h4>
                            <ul class="widget-list">
                                <li>
                                    <a href="javascript:void(0);" class="category-name">All</a>
                                    <span class="category-post-count"> 30</span>

                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="category-name">Clothing</a>
                                    <span class="category-post-count"> 09</span>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="category-name">Accessories</a>
                                    <span class="category-post-count"> 12</span>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="category-name">Shoes</a>
                                    <span class="category-post-count"> 2</span>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="category-name">Bags</a>
                                    <span class="category-post-count"> 06</span>
                                </li>
                            </ul>
                        </div>

                        <!-- best seller -->
                        <div class="shop-widget shop-widget-best-seller" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="200">
                            <h4 class="shop-widget-title">Best Sellers</h4>
                            <ul class="best-seller-list">
                                <li>
                                    <div class="best-seller-list-wrapper">
                                        <div class="best-seller-list">
                                            <div class="best-seller-thumb">
                                                <a href="shop-details.html">
                                                    <img src="assets/images/thumbs/shop-product-1.webp" alt="img">
                                                </a>
                                            </div>
                                            <div class="best-seller-content">
                                                <span class="best-seller-rating">
                                                    <i class="ph-fill ph-star"></i>
                                                    <i class="ph-fill ph-star"></i>
                                                    <i class="ph-fill ph-star"></i>
                                                    <i class="ph-fill ph-star"></i>
                                                    <i class="ph-fill ph-star"></i>
                                                </span>
                                                <h6 class="best-seller-title">
                                                    <a href="shop-details.html">Classic Leather Shoes</a>
                                                </h6>
                                                <span class="best-seller-price">$ 79.00</span>
                                            </div>
                                        </div>
                                        <div class="best-seller-list">
                                            <div class="best-seller-thumb">
                                                <a href="shop-details.html">
                                                    <img src="assets/images/thumbs/shop-product-2.webp" alt="img">
                                                </a>
                                            </div>
                                            <div class="best-seller-content">
                                                <span class="best-seller-rating">
                                                    <i class="ph-fill ph-star"></i>
                                                    <i class="ph-fill ph-star"></i>
                                                    <i class="ph-fill ph-star"></i>
                                                    <i class="ph-fill ph-star"></i>
                                                    <i class="ph-fill ph-star"></i>
                                                </span>
                                                <h6 class="best-seller-title">
                                                    <a href="shop-details.html">Classic Leather Shoes</a>
                                                </h6>
                                                <span class="best-seller-price">$ 79.00</span>
                                            </div>
                                        </div>
                                        <div class="best-seller-list">
                                            <div class="best-seller-thumb">
                                                <a href="shop-details.html">
                                                    <img src="assets/images/thumbs/shop-product-3.webp" alt="img">
                                                </a>
                                            </div>
                                            <div class="best-seller-content">
                                                <span class="best-seller-rating">
                                                    <i class="ph-fill ph-star"></i>
                                                    <i class="ph-fill ph-star"></i>
                                                    <i class="ph-fill ph-star"></i>
                                                    <i class="ph-fill ph-star"></i>
                                                    <i class="ph-fill ph-star"></i>
                                                </span>
                                                <h6 class="best-seller-title">
                                                    <a href="shop-details.html">Classic Leather Shoes</a>
                                                </h6>
                                                <span class="best-seller-price">$ 79.00</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <!-- tags -->
                        <div class="shop-widget shop-widget-tags" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="200">
                            <h4 class="shop-widget-title">Product Tags</h4>
                            <div class="widget-tags">
                                <a href="javascript:void(0);">Fashion</a>
                                <a href="javascript:void(0);">Style</a>
                                <a href="javascript:void(0);">Leather</a>
                                <a href="javascript:void(0);">Shoes</a>
                                <a href="javascript:void(0);">Bags</a>
                                <a href="javascript:void(0);">Clothing</a>
                                <a href="javascript:void(0);">Accessories</a>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-xl-9 col-lg-8 col-12">
                    <!-- shop filter -->
                    <div class="shop-filter-wrapper">
                        <div class="shop-filter-total" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                            <p>Showing 1–12 of 30 results</p>
                        </div>
                        <div class="shop-filter-option" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="300">
                            <form action="#" class="shop-filter-form">
                                <select name="shop-filter" id="shop-filter" class="">
                                    <option selected>Sort by latest</option>
                                    <option value="1">Sort by popularity</option>
                                    <option value="2">Sort by average rating</option>
                                    <option value="3">Sort by newness</option>
                                    <option value="4">Sort by price: low to high</option>
                                    <option value="5">Sort by price: high to low</option>
                                </select>
                            </form>
                        </div>
                    </div>
                    <!-- shop products -->
                    <div class="row g-4 mb-60">
                        <div class="col-xl-4 col-sm-6 col-12 product-card-col">
                            <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="200">
                                <div class="product-card-thumb">
                                    <a href="shop-details.html">
                                        <img src="assets/images/thumbs/shop-product-1.webp" alt="img">
                                    </a>
                                    <div class="product-card-action-button-wrapper">
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                                <i class="ph ph-shopping-cart"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-compare-btn"
                                                title="Add to Compare">
                                                <i class="ph ph-sliders-horizontal"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-wishlist-btn"
                                                title="Add to Wishlist">
                                                <i class="ph ph-heart"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-card-content">
                                    <div class="product-card-rating">
                                        <span class="product-card-rating-star">
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                        </span>
                                    </div>

                                    <h5 class="product-card-title">
                                        <a href="shop-details.html" class="">Formal Half-pant</a>
                                    </h5>
                                    <div class="product-card-meta">
                                        <span class="product-card-price">
                                            <span class="product-card-price-new">$ 99.00</span>
                                            <span class="product-card-price-old">$ 129.00</span>
                                        </span>
                                    </div>

                                    <div class="product-card-button text-center">
                                        <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                            href="javascript:void(0);">
                                            <span class="theme-btn-text">Add to Cart</span>
                                            <span class="text-only-button-icon bg-main-600 text--white">
                                                <i class="ph ph-arrow-right"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-sm-6 col-12 product-card-col">
                            <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="200">
                                <div class="product-card-thumb">
                                    <a href="shop-details.html">
                                        <img src="assets/images/thumbs/shop-product-2.webp" alt="img">
                                    </a>
                                    <div class="product-card-action-button-wrapper">
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                                <i class="ph ph-shopping-cart"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-compare-btn"
                                                title="Add to Compare">
                                                <i class="ph ph-sliders-horizontal"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-wishlist-btn"
                                                title="Add to Wishlist">
                                                <i class="ph ph-heart"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-card-content">
                                    <div class="product-card-rating">
                                        <span class="product-card-rating-star">
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                        </span>
                                    </div>

                                    <h5 class="product-card-title">
                                        <a href="shop-details.html" class="">Minimal Cap</a>
                                    </h5>
                                    <div class="product-card-meta">
                                        <span class="product-card-price">
                                            <span class="product-card-price-new">$ 99.00</span>
                                            <span class="product-card-price-old">$ 129.00</span>
                                        </span>
                                    </div>

                                    <div class="product-card-button text-center">
                                        <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                            href="javascript:void(0);">
                                            <span class="theme-btn-text">Add to Cart</span>
                                            <span class="text-only-button-icon bg-main-600 text--white">
                                                <i class="ph ph-arrow-right"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-sm-6 col-12 product-card-col">
                            <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="200">
                                <div class="product-card-thumb">
                                    <a href="shop-details.html">
                                        <img src="assets/images/thumbs/shop-product-3.webp" alt="img">
                                    </a>
                                    <div class="product-card-action-button-wrapper">
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                                <i class="ph ph-shopping-cart"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-compare-btn"
                                                title="Add to Compare">
                                                <i class="ph ph-sliders-horizontal"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-wishlist-btn"
                                                title="Add to Wishlist">
                                                <i class="ph ph-heart"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-card-content">
                                    <div class="product-card-rating">
                                        <span class="product-card-rating-star">
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                        </span>
                                    </div>

                                    <h5 class="product-card-title">
                                        <a href="shop-details.html" class="">Event T-Shirt</a>
                                    </h5>
                                    <div class="product-card-meta">
                                        <span class="product-card-price">
                                            <span class="product-card-price-new">$ 99.00</span>
                                            <span class="product-card-price-old">$ 129.00</span>
                                        </span>
                                    </div>

                                    <div class="product-card-button text-center">
                                        <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                            href="javascript:void(0);">
                                            <span class="theme-btn-text">Add to Cart</span>
                                            <span class="text-only-button-icon bg-main-600 text--white">
                                                <i class="ph ph-arrow-right"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-sm-6 col-12 product-card-col">
                            <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="200">
                                <div class="product-card-thumb">
                                    <a href="shop-details.html">
                                        <img src="assets/images/thumbs/shop-product-4.webp" alt="img">
                                    </a>
                                    <div class="product-card-action-button-wrapper">
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                                <i class="ph ph-shopping-cart"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-compare-btn"
                                                title="Add to Compare">
                                                <i class="ph ph-sliders-horizontal"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-wishlist-btn"
                                                title="Add to Wishlist">
                                                <i class="ph ph-heart"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-card-content">
                                    <div class="product-card-rating">
                                        <span class="product-card-rating-star">
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                        </span>
                                    </div>

                                    <h5 class="product-card-title">
                                        <a href="shop-details.html" class="">Tea Cup</a>
                                    </h5>
                                    <div class="product-card-meta">
                                        <span class="product-card-price">
                                            <span class="product-card-price-new">$ 99.00</span>
                                            <span class="product-card-price-old">$ 129.00</span>
                                        </span>
                                    </div>

                                    <div class="product-card-button text-center">
                                        <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                            href="javascript:void(0);">
                                            <span class="theme-btn-text">Add to Cart</span>
                                            <span class="text-only-button-icon bg-main-600 text--white">
                                                <i class="ph ph-arrow-right"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-sm-6 col-12 product-card-col">
                            <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="200">
                                <div class="product-card-thumb">
                                    <a href="shop-details.html">
                                        <img src="assets/images/thumbs/shop-product-5.webp" alt="img">
                                    </a>
                                    <div class="product-card-action-button-wrapper">
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                                <i class="ph ph-shopping-cart"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-compare-btn"
                                                title="Add to Compare">
                                                <i class="ph ph-sliders-horizontal"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-wishlist-btn"
                                                title="Add to Wishlist">
                                                <i class="ph ph-heart"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-card-content">
                                    <div class="product-card-rating">
                                        <span class="product-card-rating-star">
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                        </span>
                                    </div>

                                    <h5 class="product-card-title">
                                        <a href="shop-details.html" class="">Event T-Shirt</a>
                                    </h5>
                                    <div class="product-card-meta">
                                        <span class="product-card-price">
                                            <span class="product-card-price-new">$ 99.00</span>
                                            <span class="product-card-price-old">$ 129.00</span>
                                        </span>
                                    </div>

                                    <div class="product-card-button text-center">
                                        <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                            href="javascript:void(0);">
                                            <span class="theme-btn-text">Add to Cart</span>
                                            <span class="text-only-button-icon bg-main-600 text--white">
                                                <i class="ph ph-arrow-right"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-sm-6 col-12 product-card-col">
                            <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="200">
                                <div class="product-card-thumb">
                                    <a href="shop-details.html">
                                        <img src="assets/images/thumbs/shop-product-6.webp" alt="img">
                                    </a>
                                    <div class="product-card-action-button-wrapper">
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                                <i class="ph ph-shopping-cart"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-compare-btn"
                                                title="Add to Compare">
                                                <i class="ph ph-sliders-horizontal"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-wishlist-btn"
                                                title="Add to Wishlist">
                                                <i class="ph ph-heart"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-card-content">
                                    <div class="product-card-rating">
                                        <span class="product-card-rating-star">
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                        </span>
                                    </div>

                                    <h5 class="product-card-title">
                                        <a href="shop-details.html" class="">Best Hill Shoe</a>
                                    </h5>
                                    <div class="product-card-meta">
                                        <span class="product-card-price">
                                            <span class="product-card-price-new">$ 99.00</span>
                                            <span class="product-card-price-old">$ 129.00</span>
                                        </span>
                                    </div>

                                    <div class="product-card-button text-center">
                                        <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                            href="javascript:void(0);">
                                            <span class="theme-btn-text">Add to Cart</span>
                                            <span class="text-only-button-icon bg-main-600 text--white">
                                                <i class="ph ph-arrow-right"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-sm-6 col-12 product-card-col">
                            <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="200">
                                <div class="product-card-thumb">
                                    <a href="shop-details.html">
                                        <img src="assets/images/thumbs/shop-product-7.webp" alt="img">
                                    </a>
                                    <div class="product-card-action-button-wrapper">
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                                <i class="ph ph-shopping-cart"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-compare-btn"
                                                title="Add to Compare">
                                                <i class="ph ph-sliders-horizontal"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-wishlist-btn"
                                                title="Add to Wishlist">
                                                <i class="ph ph-heart"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-card-content">
                                    <div class="product-card-rating">
                                        <span class="product-card-rating-star">
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                        </span>
                                    </div>

                                    <h5 class="product-card-title">
                                        <a href="shop-details.html" class="">Minimal Jacket</a>
                                    </h5>
                                    <div class="product-card-meta">
                                        <span class="product-card-price">
                                            <span class="product-card-price-new">$ 99.00</span>
                                            <span class="product-card-price-old">$ 129.00</span>
                                        </span>
                                    </div>

                                    <div class="product-card-button text-center">
                                        <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                            href="javascript:void(0);">
                                            <span class="theme-btn-text">Add to Cart</span>
                                            <span class="text-only-button-icon bg-main-600 text--white">
                                                <i class="ph ph-arrow-right"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-sm-6 col-12 product-card-col">
                            <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="200">
                                <div class="product-card-thumb">
                                    <a href="shop-details.html">
                                        <img src="assets/images/thumbs/shop-product-8.webp" alt="img">
                                    </a>
                                    <div class="product-card-action-button-wrapper">
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                                <i class="ph ph-shopping-cart"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-compare-btn"
                                                title="Add to Compare">
                                                <i class="ph ph-sliders-horizontal"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-wishlist-btn"
                                                title="Add to Wishlist">
                                                <i class="ph ph-heart"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-card-content">
                                    <div class="product-card-rating">
                                        <span class="product-card-rating-star">
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                        </span>
                                    </div>

                                    <h5 class="product-card-title">
                                        <a href="shop-details.html" class="">Formal Jacket</a>
                                    </h5>
                                    <div class="product-card-meta">
                                        <span class="product-card-price">
                                            <span class="product-card-price-new">$ 99.00</span>
                                            <span class="product-card-price-old">$ 129.00</span>
                                        </span>
                                    </div>

                                    <div class="product-card-button text-center">
                                        <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                            href="javascript:void(0);">
                                            <span class="theme-btn-text">Add to Cart</span>
                                            <span class="text-only-button-icon bg-main-600 text--white">
                                                <i class="ph ph-arrow-right"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-sm-6 col-12 product-card-col">
                            <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="200">
                                <div class="product-card-thumb">
                                    <a href="shop-details.html">
                                        <img src="assets/images/thumbs/shop-product-9.webp" alt="img">
                                    </a>
                                    <div class="product-card-action-button-wrapper">
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                                <i class="ph ph-shopping-cart"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-compare-btn"
                                                title="Add to Compare">
                                                <i class="ph ph-sliders-horizontal"></i>
                                            </button>
                                        </div>
                                        <div class="product-card-action-item">
                                            <button class="product-card-action-btn add-to-wishlist-btn"
                                                title="Add to Wishlist">
                                                <i class="ph ph-heart"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-card-content">
                                    <div class="product-card-rating">
                                        <span class="product-card-rating-star">
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                            <i class="ph-fill ph-star"></i>
                                        </span>
                                    </div>

                                    <h5 class="product-card-title">
                                        <a href="shop-details.html" class="">Best Hill Shoe</a>
                                    </h5>
                                    <div class="product-card-meta">
                                        <span class="product-card-price">
                                            <span class="product-card-price-new">$ 99.00</span>
                                            <span class="product-card-price-old">$ 129.00</span>
                                        </span>
                                    </div>

                                    <div class="product-card-button text-center">
                                        <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                            href="javascript:void(0);">
                                            <span class="theme-btn-text">Add to Cart</span>
                                            <span class="text-only-button-icon bg-main-600 text--white">
                                                <i class="ph ph-arrow-right"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- pagination -->
                    <div class="row">
                        <div class="col-12">
                            <!-- pagination -->
                            <div class="pagination justify-content-center widget-pagination" data-aos="fade-up"
                                data-aos-duration="1000" data-aos-delay="200">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        <li class="page-item"><a class="page-link active"
                                                href="javascript:void(0);">01</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">02</a>
                                        </li>
                                        <li class="page-item"><a class="page-link rounded-0" href="javascript:void(0);">
                                                <i class="ph ph-caret-right"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </section>
    <!-- ============================ Shop section Start ============================= -->


    @@include('../partials/_footer-two.html')
</div>

@@include('../partials/_template-bottom.html')
</body>

</html>